<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">月度综合统计报表</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >选择某月</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="选择某月"
                            pTooltip="选择某月"
                        /-->
                        <p-calendar [(ngModel)]="searchTime" view="month" dateFormat="yy年mm月" [readonlyInput]="true" inputId="monthpicker"></p-calendar>
                    </div>
                </div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <p-button label="查询" icon="pi pi-search" (click)="search()"></p-button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height:625px">
            <p-treeTable [value]="data" responsiveLayout="scroll">
                <ng-template pTemplate="header">
                    <tr>
                        <th rowspan="2">行政区域</th>
                        <th rowspan="2">计划用水量(万m³)</th>
                        <th rowspan="2">许可用水量(万m³)</th>
                        <th rowspan="2">实际用水量(万m³)</th>
                        <th colspan="4">取水用途</th>
                    </tr>
                    <tr>
                        <th>工业用水量(万m³)</th>
                        <th>农业用水量(万m³)</th>
                        <th>生活用水量(万m³)</th>
                        <th>生产用水量(万m³)</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                    <tr [ttRow]="rowNode">
                        <td>
                            <p-treeTableToggler
                                [rowNode]="rowNode"
                            ></p-treeTableToggler>
                            {{ rowData.name }}
                        </td>
                        <td>{{ rowData.planVolume }}</td>
                        <td>{{ rowData.licenseVolume }}</td>
                        <td>{{ rowData.totalVolume }}</td>
                        <td>{{ rowData.industryVolume }}</td>
                        <td>{{ rowData.agricultureVolume }}</td>
                        <td>{{ rowData.lifeVolume }}</td>
                        <td>{{ rowData.productVolume }}</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="7">没有找到统计信息</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="loadingbody">
                    <tr>
                        <td colspan="7">正在加载统计信息，请稍等</td>
                    </tr>
                </ng-template>
            </p-treeTable>
        </div>
    </div>
</div>
